<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <script src="/echarts.js"></script>
    <script src="/echarts-gl.min.js"></script>
    <link rel="icon" href="/img/index_logo.jpg">
    <style>
        body {
            margin: 0;
            padding: 0;
            /*height: 100vh;*/
            background-image: url('/img/console/background.png');
            /*background-size: 100% 100%;*/
            background-size: cover;
            background-repeat: no-repeat;
            /*background-position: center center;*/

        }

        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .fixedInformationIdentification {
            position: absolute;
            top: 57%;
            left: 24%;
            transform: translate(-50%, -50%);
            border-radius: 5px;
            text-align: center;
            font-weight: 500;
            font-size: 26px;
            color: #F6F9FE;
        }

        .totalAmountOfStorageArea {
            position: absolute;
            top: 49%;
            left: 49%;
            transform: translate(-50%, -50%);
            font-weight: 500;
            font-size: 20px;
            color: #F6F9FE;
        }

        .layui-form-item .layui-input-inline {
            width: 100%;
            margin-right: 0px;
        }

        .layui-form-select .layui-input {
            background-color: transparent;
            border-color: transparent;
            color: #fff;
        }

        .areaForm .layui-input:focus {
            box-shadow: 0 0 0 0px #ecf5ff !important;
            border-color: transparent !important;
        }

        .areaForm .layui-input:hover {
            border-color: transparent !important;
        }

        .layui-form-select .layui-edge {
            border-top-color: #74CCFF;
        }

        .layui-form-select {
            width: 19vh;
        }


        .centerDiv .denseRackImg {
            width: 114px;
            height: 54vh;
        }

        .centerDiv .frameImage {
            position: relative;
            display: inline-block;
        }

        .centerDiv .denseRackNumber {
            position: absolute;
            top: 16.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: 30px;
            color: #1DF4EC;
        }

        .centerDiv .frameImage:not(:first-child) {
            margin-left: 2vh;
        }

        /*.denseRackImg{*/
        /*    position: absolute;*/
        /*    top: 16.5%;*/
        /*    left: 50%;*/
        /*    transform: translate(-50%, -50%);*/
        /*    color: white;*/
        /*    font-size: 12px;*/
        /*    font-weight: bold;*/
        /*    border-radius: 5px;*/
        /*    text-align: center;*/
        /*}*/
        .centerDiv .layui-form-select dl {
            background-color: rgba(0, 0, 0, 0.4);
            border-color: rgba(0, 0, 0, 0.4);
            top: 4vh;
        }

        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow-y: hidden;
        }

        .layui-progress-bar {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-size: 30px 30px; /* 可以调整这个值 */
            animation: progress-move 3s linear infinite; /* 条纹动画 */
            background-color: #238da1;
        }

        @keyframes progress-move {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 150px 0px;
            }
            /* 与background-size相同 */
        }

        .specificDate {
            width: 51px;
            font-weight: 500;
            font-size: 16px;
            color: #D1D6DF;
            line-height: 16px;
            align-items: center;
            text-align: center;
        }

        .dtree-select {
            background-color: rgba(0, 0, 0, 0.4);
            border-color: rgba(0, 0, 0, 0.4);
            color: #fff;
        }

        .dtree-theme-ficon {
            color: #FFF !important;
        }

        .chartDataInfo {
            margin-left: 10px;
            font-weight: 500;
            font-size: 15px;
            color: #FFFFFF;
        }

        .chartDataIcon {
            width: 11px;
            height: 11px;
            background-color: #33CCCC
        }

        .layui-form-select dl dd {
            color: #FFFFFF !important;
        }

        .dtree-theme-item-this {
            background-color: #F6F6F6 !important;
            color: #2d8cf0 !important;
        }

        .layui-form-select dl dd.layui-this {
            font-weight: 500;
        }

        .layui-form-select .layui-input {
            height: 47px;
        }

        .layui-input::placeholder {
            color: #fff;
        }

        /*柜子详情*/
        .webui-popover .webui-popover-content {
            overflow: hidden;
        }

        .webui-popover.right > .webui-arrow:after {
            border-right-color: #607D8B;

        }

        .webui-popover {
            background-color: black;
        }

        .webui-popover-title {
            background-color: black;
            border-bottom: 1px solid black;
            color: #FFF;
            font-weight: 500;
        }

        .webui-popover-inner .close {
            font-size: 27px;
            font-weight: 500;
            line-height: 16px;
            color: #FFF;
            text-shadow: none;
            opacity: 1;
        }

        .functionImg {
            width: 98px;
            height: 111px;
            /*position: relative;*/
        }

        .functionButtons {
            font-weight: 400;
            font-size: 20px;
            color: #1DF4EC;
            margin-top: 5px;
        }

        /*消息提示*/
        .msg-class {
            color: #fff;
            background-color: black;
        }

        .msg-class .layui-layer-content {
            font-size: 16px;
        }
    </style>
</head>
<body>
<a href="javascript:void(0)" id="returnToPage">
    <div style="padding-top: 15px;margin-left: 11px;height: 3vh;" class="centered">
        <img src="/img/console/返回.png" alt="" style="width: 4vh;height: 100%">
        <span style="font-weight: 500;font-size: 20px;color: #FFFFFF;line-height: 20px;width: auto">返回</span>
    </div>
</a>
<div style="margin:0px 80px;margin-top: 10px;justify-content: flex-end;
    display: flex;flex-direction: row;
    align-items: center;" class="centered">
    <!--    <div class="centered" style="font-weight: 500;-->
    <!--    font-size: 18px;color: #CDD6E3;line-height: 20px;">-->
    <!--        <img src="/img/console/湿度.png" alt="logo" style="width:16px;height:21px;">-->
    <!--        <div style="margin-left: 9px;">湿度</div>-->
    <!--        <div style="margin-left: 10px;">17℃</div>-->
    <!--        <div style="width: 2px;height: 27px;border: 1px solid #9EC5E7;opacity: 0.35;margin-left: 23px;"></div>-->
    <!--        <img src="/img/console/温度.png" alt="logo" style="width:12px;height:22px;margin-left: 23px">-->
    <!--        <div style="margin-left: 9px;">温度</div>-->
    <!--        <div style="margin-left: 10px;">17℃</div>-->
    <!--    </div>-->
    <div class="centered" style="font-weight: 500;
    font-size: 22px;color: #CDD6E3;line-height: 22px;">
        <div class="title-time">0000-00-00 00:00:00</div>
    </div>
</div>
<div class="layui-row" style="margin-top: 1vh;">
    <div class="layui-col-md3 layui-col-sm3"
         style="border-radius: 6px;background: rgba(5,25,53,0.44);display: flex;flex-direction: column;align-items: center;">
        <div style="position: relative;display: inline-block;padding-top: 3vh;width: 100%;text-align: center;">
            <img src="/img/console/库存容量.png" alt="" style="height: 7vh;width: 88%;">
            <span class="fixedInformationIdentification">库存容量</span>
        </div>
        <div style="padding-top: 3vh" class="centered">
            <div class="centered">
                <div>
                    <img src="/img/console/库房总数.png" alt="" style="width: 5vh;height: 5vh;">
                </div>
                <div style="margin-left: 12px;">
                    <div style="font-weight: 500;font-size: 16px;color: #CEDCE6;">库房总数</div>
                    <div style="font-weight: 500;font-size: 26px;color: #32DCFB;" id="totalNumber">000</div>
                </div>
            </div>
            <div class="centered" style="margin-left: 30px">
                <div>
                    <img src="/img/console/在库数.png" alt="" style="width: 5vh;height: 5vh;">
                </div>
                <div style="margin-left: 12px;">
                    <div style="font-weight: 500;font-size: 16px;color: #CEDCE6;">在库数</div>
                    <div style="font-weight: 500;font-size: 26px;color: #32DCFB;" id="inTheLibraryCount">000
                    </div>
                </div>
            </div>
            <div class="centered" style="margin-left: 30px">
                <div>
                    <img src="/img/console/借出数.png" alt="" style="width: 5vh;height: 5vh;">
                </div>
                <div style="margin-left: 12px;">
                    <div style="font-weight: 500;font-size: 16px;color: #CEDCE6;">借出数</div>
                    <div style="font-weight: 500;font-size: 26px;color: #32DCFB;" id="borrowingCount">000</div>
                </div>
            </div>
        </div>
        <div style="position: relative;display: inline-block;padding: 3vh;">
            <img src="/img/console/库区总量.png" alt="" style="width: 418px;height: 39px;">
            <span class="totalAmountOfStorageArea centered">
                库区容量百分比
                <!--                <span style="margin-left: 15px;font-weight: 500;font-size: 34px;color: #74DCFF;">-->
                <!--                    00%-->
                <!--                </span>-->
            </span>
        </div>
        <div class="centered" style="width: 88%;margin-top: 20px;">
            <div id="main3" style="width: 60%;height: 20vh;"></div>
            <div style="margin-left: 2%" id="chartDataDiv">
                <div class="chartData centered">
                    <div class="chartDataIcon"></div>
                    <div class="chartDataInfo">1区</div>
                    <div class="chartDataInfo">00</div>
                    <div class="chartDataInfo">占比00%</div>

                </div>
            </div>
        </div>
        <div style="position: relative;display: inline-block;width: 100%;text-align: center;">
            <img src="/img/console/库存容量.png" alt="" style="height: 7vh;width: 88%;">
            <span class="fixedInformationIdentification" style="top: 41%;">档案借阅</span>
        </div>
        <div class="left border" style="width: 100%;margin: 0 auto;margin-top: 0px">
            <div id="litiBar1" style="width:100%;height:34vh;"></div>
        </div>
    </div>
    <div class="layui-col-md6 layui-col-sm6 centerDiv"
         style="display: flex;flex-direction: column;position: relative;">
        <div style="margin-top: 10px;margin-left: 10px;">
            <!--            <div style="position: relative;display: inline-block;">-->
            <!--                <img src="/img/console/选择库区.png" style="width: 20vh;height: 9vh;margin-top: 1%;">-->
            <!--                <span class="fixedInformationIdentification"-->
            <!--                      style="width: auto;top: 22%;left: 56px;font-size: 18px;">选择库区</span>-->
            <!--                <form class="layui-form areaForm" action="" onsubmit="return false"-->
            <!--                      style="position: absolute;top: 39%">-->
            <!--                    <div class="layui-form-item">-->
            <!--                        <div class="layui-input-inline" style="margin-right: 0px">-->
            <!--                            &lt;!&ndash;                            <input type="number" id="archiveArea" name="archiveArea" lay-verify="required"&ndash;&gt;-->
            <!--                            &lt;!&ndash;                                   lay-reqtext="请选择区域位置" th:value="${bottomArea.getId()}"&ndash;&gt;-->
            <!--                            &lt;!&ndash;                                   style="display:none;width: 0px;" autocomplete="off" class="layui-input">&ndash;&gt;-->
            <!--                            &lt;!&ndash;                            <ul id="areaTree" class="dtree" data-id="0" th:data-value="${bottomArea.getId()}"></ul>&ndash;&gt;-->
            <!--                            <input type="number" id="archiveArea" name="archiveArea" lay-verify="required"-->
            <!--                                   lay-reqtext="请选择区域位置"-->
            <!--                                   style="display:none;width: 0px;" autocomplete="off" class="layui-input">-->
            <!--                            <ul id="areaTree" class="dtree" data-id="0"></ul>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </form>-->
            <!--            </div>-->
            <div style="position: relative;display: inline-block;">
                <img src="/img/console/选择库区.png" style="width: 20vh;height: 9vh;margin-top: 1%;">
                <span class="fixedInformationIdentification"
                      style="width: auto;top: 22%;left: 56px;font-size: 18px;">选择载体</span>
                <form class="layui-form areaForm" action="" onsubmit="return false"
                      style="position: absolute;top: 39%;">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select name="host" lay-filter="carrierSelect" id="carrierSelect">
                                <option value="">请选择载体设备</option>
                                <option value="" th:each="host : ${hostList}" th:value="${host.getId()}"
                                        th:text="${host.getCabinetName()+'区号'+host.getCabinetNumber()}">请选择载体设备
                                </option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div id="regionalWarehouse" style="margin: auto 0;">
            <div style="text-align: center">
                <img src="/img/console/区域库房.png" alt="" style="width: 90%;height: 550px;margin-top: 3vh;">
            </div>
        </div>
        <div id="cabinetInfo" style="margin-top: 10vh;height: 55vh;display: none">
            <div style="display: flex;overflow: auto;width: 90%;padding: 0vh 3vh;" id="cabinetInfoContent">
                <div class="frameImage">
                    <a href="javascript:void(0)">
                        <img src="/img/console/密集架.png" alt="" class="denseRackImg">
                        <span class="denseRackNumber">1</span>
                    </a>
                </div>
            </div>
            <div style="margin-top: -4vh;">
                <img src="/img/console/密集架下面.png" alt="" style="width: 100%">
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm3"
         style="border-radius: 6px;background: rgba(5,25,53,0.44);display: flex;flex-direction: column;align-items: center;">
        <div style="position: relative;display: inline-block;padding-top: 3vh;width: 100%;text-align: center;">
            <img src="/img/console/库存容量.png" alt="" style="height: 7vh;width: 88%;">
            <span class="fixedInformationIdentification">档案分布</span>
        </div>
        <div style="padding-top: 3vh;width: 100%;flex-direction: column;" class="centered">
            <div style="font-weight: 400;width: 85%;justify-content: space-between;" class="centered">
                <div style="font-size: 16px;color: #FFFFFF;">在库</div>
                <div style="color: #00B3FD;font-size: 20px;" id="progressbarIsInTheLibrary">000</div>
            </div>
            <div style="width: 90%;margin-top: 2vh">
                <div class="layui-progress layui-progress-big" lay-filter="progressbarIsInTheLibrary">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
            </div>
        </div>
        <div style="padding-top: 3vh;width: 100%;flex-direction: column;" class="centered">
            <div style="font-weight: 400;width: 85%;justify-content: space-between;" class="centered">
                <div style="font-size: 16px;color: #FFFFFF;">出库</div>
                <div style="color: #00B3FD;font-size: 20px;" id="progressbarIsBorrowingCount">000</div>
            </div>
            <div style="width: 90%;margin-top: 2vh">
                <div class="layui-progress layui-progress-big" lay-filter="progressbarIsBorrowingCount">
                    <div class="layui-progress-bar" lay-percent="0%" style="background-color: #288625f2"></div>
                </div>
            </div>
        </div>
        <div style="padding-top: 3vh;width: 100%;flex-direction: column;" class="centered">
            <div style="font-weight: 400;width: 85%;justify-content: space-between;" class="centered">
                <div style="font-size: 16px;color: #FFFFFF;">出库未取走</div>
                <div style="color: #00B3FD;font-size: 20px;" id="progressbarIsOutboundNotTakenAway">000</div>
            </div>
            <div style="width: 90%;margin-top: 2vh">
                <div class="layui-progress layui-progress-big" lay-filter="progressbarIsOutboundNotTakenAway">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
            </div>
        </div>
        <div style="padding-top: 3vh;width: 100%;flex-direction: column;" class="centered">
            <div style="font-weight: 400;width: 85%;justify-content: space-between;" class="centered">
                <div style="font-size: 16px;color: #FFFFFF;">归还未入库</div>
                <div style="color: #00B3FD;font-size: 20px;" id="progressbarIsReturnedNotYet">000</div>
            </div>
            <div style="width: 90%;margin-top: 2vh">
                <div class="layui-progress layui-progress-big" lay-filter="progressbarIsReturnedNotYet">
                    <div class="layui-progress-bar" lay-percent="0%" style="background-color: #288625f2"></div>
                </div>
            </div>
        </div>
        <div style="position: relative;display: inline-block;padding-top: 3vh;width: 100%;text-align: center;">
            <img src="/img/console/库存容量.png" alt="" style="height: 7vh;width: 88%;">
            <span class="fixedInformationIdentification" style="left: 29.5%;">档案库存趋势</span>
        </div>
        <div class="centered" style="width: 92%;justify-content: space-between;">
            <div style="font-style: italic;font-weight: 500;font-size: 18px;color: #ACDDFF;">存入和删除趋势</div>
            <!--            <div class="centered">-->
            <!--                <div class="specificDate">年</div>-->
            <!--                <div class="specificDate">月</div>-->
            <!--                <div class="specificDate">日</div>-->
            <!--            </div>-->
        </div>
        <div style="width: 100%;margin: 0 auto;margin-top: 0px">
            <div id="depositTrend" style="width:100%;height:32vh;"></div>
        </div>
    </div>
</div>
<div style="position: absolute;bottom: 1.5%;left: 32%;display: flex;flex-direction: row;width: 35%;justify-content: space-around;z-index: 2">
    <a href="javascript:void(0)">
        <div style="display: flex;flex-direction: column;align-items: center;" lay-on="improveAirCirculation"
             id="improveAirCirculation">
            <img src="/img/console/通风.png" alt="" class="functionImg">
            <div class="functionButtons" style="position: absolute;top: 59%;left: 7%;">通风</div>
        </div>
    </a>
    <a href="javascript:void(0)">
        <div style="display: flex;flex-direction: column;align-items: center;" lay-on="closedFrame" id="closedFrame">
            <img src="/img/console/闭架.png" alt="" class="functionImg">
            <div class="functionButtons" style="position: absolute;top: 59%;left: 27%;">闭架</div>
        </div>
    </a>
    <a href="javascript:void(0)">
        <div style="display: flex;flex-direction: column;align-items: center;" lay-on="lock" id="lock">
            <img src="/img/console/锁定.png" alt="" class="functionImg">
            <div class="functionButtons" style="position: absolute;top: 59%;left: 47%;">锁定</div>
        </div>
    </a>
    <a href="javascript:void(0)">
        <div style="display: flex;flex-direction: column;align-items: center;" lay-on="stop" id="stop">
            <img src="/img/console/停止.png" alt="" class="functionImg">
            <div class="functionButtons" style="position: absolute;top: 59%;left: 67%;">停止</div>
        </div>
    </a>
    <a href="javascript:void(0)">
        <div style="display: flex;flex-direction: column;align-items: center;" lay-on="exit" id="exit">
            <img src="/img/console/退出.png" alt="" class="functionImg">
            <div class="functionButtons" style="position: absolute;top: 59%;left: 87%;">退出</div>
        </div>
    </a>

</div>
<div style="position:absolute;bottom:0;left: 25%;width: 50%;height: 6vh;text-align: center;z-index: 1">
    <img src="/img/console/下面半圆.png" alt="" style="width: 100%;height: auto;">
</div>


<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script th:fragment="fragment-script">
    var $ = layui.jquery;

    function updateTime() {
        var currentDate = new Date(); // 获取当前日期和时间对象
        var year = currentDate.getFullYear(); // 年份
        var month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份（注意月份从0开始计算）
        var day = currentDate.getDate().toString().padStart(2, '0'); // 天数
        var hours = currentDate.getHours().toString().padStart(2, '0'); // 小时
        var minutes = currentDate.getMinutes().toString().padStart(2, '0'); // 分钟
        var seconds = currentDate.getSeconds().toString().padStart(2, '0'); // 秒数
        var time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化为字符串形式
        $(".title-time").text(time);
    }

    // 每秒更新一次时间
    setInterval(updateTime, 1000);
</script>
<script th:inline="javascript">
    // var bottomArea = [[${bottomArea}]];
    var areaId = "";
    var hostId = "";
    var cabinetNumber = [[${cabinetNumber}]];


    layui.use(['jquery', 'layer', 'dtree', 'popover', 'util'], function () {
        var form = layui.form;
        var $ = layui.jquery,
            layer = layui.layer,
            dtree = layui.dtree,
            element = layui.element,
            popover = layui.popover,
            util = layui.util;

        function reqeustUtil(url, data) {
            let loading = layer.load();
            $.ajax({
                url: url,
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: "POST",
                data: JSON.stringify(data),
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 3000, skin: 'msg-class'});
                    } else {
                        layer.msg(result.message, {icon: 2, time: 3000, skin: 'msg-class'});
                    }
                }
            })
        }

        util.on({
            improveAirCirculation: function () {
                if (hostId === "") {
                    layer.msg("请选择载体设备", {icon: 2, time: 3000, skin: 'msg-class'});
                    return false;
                }
                // 通风
                reqeustUtil("/hand/movement/airChange", {"hostId": hostId});
                $("#improveAirCirculation").find(".functionImg").attr("src", "/img/console/通风开.png");
                $("#improveAirCirculation").find(".functionButtons").text("通风开");
                setTimeout(function () {
                    $("#improveAirCirculation").find(".functionImg").attr("src", "/img/console/通风.png");
                    $("#improveAirCirculation").find(".functionButtons").text("通风");
                }, 3000)
            },
            closedFrame: function () {
                if (hostId === "") {
                    layer.msg("请选择载体设备", {icon: 2, time: 3000, skin: 'msg-class'});
                    return false;
                }
                // 闭架
                reqeustUtil("/hand/movement/closedFrame", {"hostId": hostId});
                $("#closedFrame").find(".functionImg").attr("src", "/img/console/闭架开.png");
                $("#closedFrame").find(".functionButtons").text("闭架开");
                setTimeout(function () {
                    $("#closedFrame").find(".functionImg").attr("src", "/img/console/闭架.png");
                    $("#closedFrame").find(".functionButtons").text("闭架");
                }, 3000)
            },
            lock: function () {
                if (hostId === "") {
                    layer.msg("请选择载体设备", {icon: 2, time: 3000, skin: 'msg-class'});
                    return false;
                }
                // 锁定
                reqeustUtil("/hand/movement/lock", {"hostId": hostId});
                $("#lock").find(".functionImg").attr("src", "/img/console/锁定开.png");
                $("#lock").find(".functionButtons").text("锁定开");
                setTimeout(function () {
                    $("#lock").find(".functionImg").attr("src", "/img/console/锁定.png");
                    $("#lock").find(".functionButtons").text("锁定");
                }, 3000)
            },
            stop: function () {
                if (hostId === "") {
                    layer.msg("请选择载体设备", {icon: 2, time: 3000, skin: 'msg-class'});
                    return false;
                }
                // 停止
                reqeustUtil("/hand/movement/mtStop", {"hostId": hostId});
                $("#stop").find(".functionImg").attr("src", "/img/console/停止开.png");
                $("#stop").find(".functionButtons").text("停止开");
                setTimeout(function () {
                    $("#stop").find(".functionImg").attr("src", "/img/console/停止.png");
                    $("#stop").find(".functionButtons").text("停止");
                }, 3000)
            }
            , exit: function () {
                if (hostId === "") {
                    layer.msg("请选择载体设备", {icon: 2, time: 3000, skin: 'msg-class'});
                    return false;
                }
                // 退出
                reqeustUtil("/hand/movement/loginOut", {"hostId": hostId});
                $("#exit").find(".functionImg").attr("src", "/img/console/退出开.png");
                $("#exit").find(".functionButtons").text("退出开");
                setTimeout(function () {
                    $("#exit").find(".functionImg").attr("src", "/img/console/退出.png");
                    $("#exit").find(".functionButtons").text("退出");
                }, 3000)
            }


        });

        // 鼠标移入移出事件
        // $(".frameImage").mouseover(function () {
        $('#cabinetInfoContent').on('mouseover', '.frameImage', function () {
            let denseRackColumn = $(this).find(".denseRackNumber").text();
            console.log(denseRackColumn)
            popover.create('#cabinet_' + denseRackColumn, {
                title: '第' + denseRackColumn + '列详情',
                trigger: 'click',
                animation: 'pop',
                closeable: true,
                placement: 'right',
                delay: {
                    show: null,
                    hide: 100
                },
                cache: false,
                opacity: 0.98,
                type: 'iframe',//content type, values:'html','iframe','async'
                url: '/console/cabinet/info?hostId=' + hostId + '&column=' + denseRackColumn,
                // width: 500,
                height: 300
            });
        })
            .mouseout(function () {
                console.log(222);
            });


        $("#returnToPage").click(function () {
            window.location = "/index"
            parent.layui.admin.closeCurrentTab();
        });

        // dtree插件下拉框点击空白处隐藏
        $(document).bind("click", function (e) {
            var e = e || window.event;    //事件对象，兼容IE
            var target = e.target || e.srcElement;  //源对象，兼容火狐和IE
            if ($(target).prop("class").indexOf("layui-card") == -1) {
                $(".dtree-select-show").removeClass("dtree-select-show");
            }
        })
        // // 初始化区域树
        // dtree.render({
        //     elem: "#areaTree",
        //     initLevel: "1",//默认展开层级为1
        //     width: "100%",
        //     method: 'get',
        //     dataStyle: "layuiStyle",  //使用layui风格的数据格式
        //     // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
        //     url: "/archives/area/buildAreaTree/table",
        //     dataFormat: "list",  //配置data的风格为list
        //     select: true, //指定下拉树模式
        //     selectTips: "请选择区域位置",
        //     selectCardHeight: "250"
        // });
        // dtree.on("node('areaTree')", function (obj) {
        //     $("#regionalWarehouse").css("display", "");
        //     $("#cabinetInfo").css("display", "none");
        //     var param = dtree.getNowParam("areaTree");
        //     areaId = param.nodeId;
        //     hostId = "";
        //     // loadData(areaId);
        //     $.ajax({
        //         url: "/host/get/list?areaId=" + areaId,
        //         type: "get",
        //         dataType: "json",
        //         success: function (result) {
        //             carrierSelect = result.data;
        //             let carrierSelectHtml = "<select name='hostId' lay-verify='required' lay-reqtext='请选择载体设备' lay-search>";
        //             carrierSelectHtml += "<option value=''>请选择载体设备</option>";
        //             for (let i = 0; i < carrierSelect.length; i++) {
        //                 let item = carrierSelect[i];
        //                 carrierSelectHtml += "<option value='" + item.id + "'>载体名称:" + item.cabinetName + " 区号:" + item.cabinetNumber + "</option>";
        //             }
        //             carrierSelectHtml += "</select>";
        //             $("#carrierSelect").html(carrierSelectHtml);
        //             form.render("select");
        //         }
        //     });
        //
        // });

        // 选择载体
        form.on('select(carrierSelect)', function (data) {
            var value = data.value;
            if (value === "") {
                $("#regionalWarehouse").css("display", "");
                $("#cabinetInfo").css("display", "none");
                return false;
            }
            hostId = value;
            $("#regionalWarehouse").css("display", "none");
            $("#cabinetInfo").css("display", "");
            column = "";
            $.ajax({
                url: '/host/get/info?hostId=' + hostId,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    let html = "";
                    for (let column = 1; column <= result.data.columnNumber; column++) {
                        html += '<div class="frameImage el2" id="cabinet_' + column + '">';
                        // html += '<a href="javascript:void(0)">'
                        if (column == result.data.fixedColumn) {
                            html += '<img src="/img/console/固定列.png" alt="" class="denseRackImg">';
                        } else {
                            html += '<img src="/img/console/密集架.png" alt="" class="denseRackImg">';
                        }
                        html += '<span class="denseRackNumber">' + column + '</span>';
                        // html += ' </a>';
                        html += '</div>';
                    }
                    $("#cabinetInfoContent").empty();
                    $("#cabinetInfoContent").append(html);
                },
            });
        });

        // 第一次进入
        function loadData() {
            $.ajax({
                url: "/console/default",
                type: "get",
                dataType: "json",
                success: function (result) {
                    if (result.code === 200) {
                        result = result.data;
                        console.log(result)
                        $("#totalNumber").text(result.totalNumber);
                        $("#inTheLibraryCount").text(result.inTheLibraryCount);
                        $("#borrowingCount").text(result.borrowingCount);
                        $(".chartData").remove();
                        html = '';
                        for (let index in result.areaList) {
                            let data = result.areaList[index];
                            html += '<div class="chartData centered" style="margin-top: 1vh">';
                            html += '<div class="chartDataIcon"></div>';
                            html += '<div class="chartDataInfo">' + data.cabinetNumber + '区</div>';
                            html += '<div class="chartDataInfo">' + data.count + '</div>';
                            html += '<div class="chartDataInfo">占比' + data.percent + '%</div>';
                            html += '</div>';
                        }
                        $("#chartDataDiv").append(html);
                        pieChart(result.pieChartList);
                        barChart(result.barChartXName, result.barChartLendingList, result.barChartReturnList);

                        $("#progressbarIsInTheLibrary").text(result.progressbarIsInTheLibrary);
                        $("#progressbarIsBorrowingCount").text(result.progressbarIsBorrowingCount);
                        $("#progressbarIsOutboundNotTakenAway").text(result.progressbarIsOutboundNotTakenAway);
                        $("#progressbarIsReturnedNotYet").text(result.progressbarIsReturnedNotYet);
                        element.progress('progressbarIsInTheLibrary', result.progressbarIsInTheLibrary + '%');
                        element.progress('progressbarIsBorrowingCount', result.progressbarIsBorrowingCount + '%');
                        element.progress('progressbarIsOutboundNotTakenAway', result.progressbarIsOutboundNotTakenAway + '%');
                        element.progress('progressbarIsReturnedNotYet', result.progressbarIsReturnedNotYet + '%');

                        addfileLineChart(result.barChartXName, result.deleteStrList, result.insertList);
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1800});
                    }
                }
            });
        }

        loadData()


        // 三维饼图
        function pieChart(pieChartList) {
            // var data = [
            // {name: '21', value: 5, itemStyle: {color: '#637FEA'}},
            //     // {name: 'B区', value: 45, itemStyle: {color: '#4B8EB1'}, startRatio: 0.7, endRatio: 1},
            //     // {name: 'C区', value: 11, itemStyle: {color: '#954CD8'}, startRatio: 0.7, endRatio: 1},
            //     // {name: 'D区', value: 14, itemStyle: {color: '#EDCC31'}, startRatio: 0.7, endRatio: 1},
            //     // {name: 'E区', value: 14, itemStyle: {color: '#25BD97'}, startRatio: 0.7, endRatio: 1},
            //     {name: 'A区', value: 50},
            //     {name: 'B区', value: 45},
            //     {name: 'C区', value: 11},
            //     {name: 'D区', value: 14},
            //     {name: 'E区', value: 14},
            // ];
            let colorList = ["#637FEA", '#73DDFF', '#4B8EB1', '#954CD8', '#9E87FF', '#EDCC31', '#25BD97']
            let data = pieChartList;
            var optionConfig = {};
            const getPie3D = (pieData, internalDiameterRatio) => {
                //internalDiameterRatio:透明的空心占比
                let series = [];
                let sumValue = 0;
                let startValue = 0;
                let endValue = 0;
                let k = 1;
                pieData.sort((a, b) => {
                    return b.value - a.value;
                });
                // 为每一个饼图数据，生成一个 series-surface 配置
                for (let i = 0; i < pieData.length; i++) {
                    sumValue += pieData[i].value;
                    let seriesItem = {
                        name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
                        type: 'surface',
                        parametric: true,
                        wireframe: {
                            show: false,
                        },
                        pieData: pieData[i],
                        pieStatus: {
                            selected: false,
                            hovered: false,
                            k: k,
                        },
                        radius: '50%',
                        center: ['10%', '10%'],
                    };

                    if (typeof pieData[i].itemStyle != 'undefined') {
                        let itemStyle = {};
                        typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
                        typeof pieData[i].itemStyle.opacity != 'undefined'
                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                            : null;
                        seriesItem.itemStyle = itemStyle;
                    }
                    series.push(seriesItem);
                }

                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
                for (let i = 0; i < series.length; i++) {
                    endValue = startValue + series[i].pieData.value;
                    series[i].pieData.startRatio = startValue / sumValue;
                    series[i].pieData.endRatio = endValue / sumValue;
                    series[i].parametricEquation = getParametricEquation(
                        series[i].pieData.startRatio,
                        series[i].pieData.endRatio,
                        false,
                        false,
                        k,
                        series[i].pieData.value
                    );
                    startValue = endValue;
                }
                let boxHeight = getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px
                // 准备待返回的配置项，把准备好的 legendData、series 传入。
                let option = {
                    // backgroundColor: '#203598',
                    labelLine: {
                        show: false,
                        // lineStyle: {
                        //     color: '#404772',
                        // },
                    },
                    label: {
                        show: false,
                        position: 'outside',
                        rich: {
                            b: {
                                fontSize: 24,
                                lineHeight: 30,
                                fontWeight: 'bold',
                                color: '#fff',
                            },
                            c: {
                                fontSize: 18,
                                color: '#fff',
                            },
                        },
                        formatter: '{b|{b}}\n{c|{c}%}',
                    },
                    tooltip: {
                        backgroundColor: '#ffffff',
                        formatter: (params) => {
                            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
                                let bfb = (
                                    (option.series[params.seriesIndex].pieData.endRatio -
                                        option.series[params.seriesIndex].pieData.startRatio) *
                                    100
                                ).toFixed(2);
                                return (
                                    `${params.seriesName}<br/>` +
                                    `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                                    `${bfb}%`
                                );
                            }
                        },
                    },
                    xAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    yAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    zAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    grid3D: {
                        show: false,
                        boxHeight: boxHeight, //圆环的高度
                        left: 0,
                        top: 0, //3d饼图的位置
                        viewControl: {
                            //3d效果可以放大、旋转等，请自己去查看官方配置
                            alpha: 35, //角度
                            distance: 250, //调整视角到主体的距离，类似调整zoom
                            rotateSensitivity: 1, //设置为0无法旋转1可旋转
                            zoomSensitivity: 1, //设置为0无法缩放1可缩放
                            panSensitivity: 1, //设置为0无法平移1可平移
                            autoRotate: true, //自动旋转
                        },
                    },
                    series: series,
                };
                return option;
            };
            //获取3d丙图的最高扇区的高度
            const getHeight3D = (series, height) => {
                series.sort((a, b) => {
                    return b.pieData.value - a.pieData.value;
                });
                return (height * 25) / series[0].pieData.value;
            };

            // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
            const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h) => {
                // 计算
                let midRatio = (startRatio + endRatio) / 2;
                let startRadian = startRatio * Math.PI * 2;
                let endRadian = endRatio * Math.PI * 2;
                let midRadian = midRatio * Math.PI * 2;
                // 如果只有一个扇形，则不实现选中效果。
                if (startRatio === 0 && endRatio === 1) {
                    isSelected = true;
                }
                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
                k = typeof k !== 'undefined' ? k : 1 / 3;
                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
                // 计算高亮效果的放大比例（未高亮，则比例为 1）
                let hoverRate = isHovered ? 1.05 : 1;
                // 返回曲面参数方程
                return {
                    u: {
                        min: -Math.PI,
                        max: Math.PI * 3,
                        step: Math.PI / 32,
                    },
                    v: {
                        min: 0,
                        max: Math.PI * 2,
                        step: Math.PI / 20,
                    },
                    x: function (u, v) {
                        if (u < startRadian) {
                            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                        }
                        if (u > endRadian) {
                            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                        }
                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
                    },
                    y: function (u, v) {
                        if (u < startRadian) {
                            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                        }
                        if (u > endRadian) {
                            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                        }
                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
                    },
                    z: function (u, v) {
                        if (u < -Math.PI * 0.5) {
                            return Math.sin(u);
                        }
                        if (u > Math.PI * 2.5) {
                            return Math.sin(u) * h * 0.1;
                        }
                        return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
                    },
                };
            };
            option = getPie3D(data, 0.8);
            //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
            // option.series.push({
            //     name: 'pie2d',
            //     type: 'pie',
            //     labelLine: {
            //         length: 10,
            //         length2: 10,
            //     },
            //     startAngle: -25, //起始角度，支持范围[0, 360]。
            //     clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
            //     radius: ['65%', '65%'],
            //     center: ['55%', '48%'], //指示线的位置
            //     data: data,
            //     itemStyle: {
            //         opacity: 0,
            //     },
            // });
            var chartDom = document.getElementById('main3');
            var myChart = echarts.init(chartDom);
            option && myChart.setOption(option);

        }
    });

    function barChart(barChartXName, barChartLendingList, barChartReturnList) {
        //组织数据
        let setData = function (data, constData, showData) {
            data.filter(function (item) {
                if (item) {
                    constData.push(1);
                    showData.push(item);
                } else {
                    constData.push(0);
                    showData.push({
                        value: 1,
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(0,0,0,0)",
                                borderWidth: 2,
                                color: "rgba(0,0,0,0)",
                            },
                        },
                    });
                }
            });
        }
        //组织颜色
        let setColor = function (colorArr) {
            let color = {
                type: "linear",
                x: 0,
                x2: 1,
                y: 0,
                y2: 0,
                /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
                    x: 0,
                    x2: 0,
                    y: 0,
                    y2: 1, */
                colorStops: [{
                    offset: 0,
                    color: colorArr[0],
                },
                    {
                        offset: 0.5,
                        color: colorArr[0],
                    },
                    {
                        offset: 0.5,
                        color: colorArr[1],
                    },
                    {
                        offset: 1,
                        color: colorArr[1],
                    },
                ],
            };
            return color;
        }
        var barWidth = 30;
        var constData1 = [];
        var showData1 = [];


        var constData2 = [];
        var showData2 = [];

        setData(barChartLendingList, constData1, showData1)
        setData(barChartReturnList, constData2, showData2)

        var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
        var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];

        var color1 = setColor(colorArr1)
        var color2 = setColor(colorArr2)


        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                show: false
            },
            grid: {
                top: '15%',
                bottom: '15%'
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: '#FFFFFF'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1B3F66'
                    }
                },
                axisTick: {
                    show: false
                },
                data: barChartXName
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#FFFFFF'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1B3F66'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#1B3F66'
                    }
                }
            },
            series: [{
                z: 1,
                type: 'bar',
                name: '借阅',
                barGap: "15%", //相邻柱子间距
                itemStyle: {
                    borderRadius: [0, 0, 0, 0],//柱子四周圆角
                    color: color1//柱子左右颜色（深，浅）
                },
                data: barChartLendingList //Y轴上的高度
            },
                // ---------------------------------------------
                {
                    z: 2,
                    name: '借阅',
                    type: "pictorialBar",
                    data: constData1,//此数据对应底部组件
                    symbol: "diamond",//底部组件形状，不写默认为椭圆
                    symbolOffset: ["-58%", "50%"],//与柱子的偏移角度
                    symbolSize: [25, 10],//底面[宽，高]
                    itemStyle: {
                        normal: {
                            color: color1//底面左右颜色（深，浅）
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },
                {
                    z: 3,
                    name: '借阅',
                    type: "pictorialBar",
                    symbolPosition: "end",
                    data: showData1,//此数据对应顶部组件
                    symbol: "diamond",
                    symbolOffset: ["-55%", "-50%"],
                    symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                    itemStyle: {
                        normal: {
                            /* borderColor: colorArr1[2],
                            borderWidth: 2, */ //加上棱角分明
                            color: colorArr1[1]
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },
                {
                    z: 1,
                    type: 'bar',
                    name: '归还',
                    itemStyle: {
                        borderRadius: [0, 0, 0, 0],
                        color: color2
                    },
                    data: barChartReturnList
                },
                {
                    z: 2,
                    name: '归还',
                    type: "pictorialBar",
                    data: constData2,
                    symbol: "diamond",
                    symbolOffset: ["58%", "50%"],
                    symbolSize: [25, 10], //=========================
                    itemStyle: {
                        normal: {
                            color: color2
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },
                {
                    z: 3,
                    name: '归还',
                    type: "pictorialBar",
                    symbolPosition: "end",
                    data: showData2,
                    symbol: "diamond",
                    symbolOffset: ["58%", "-50%"],
                    symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                    itemStyle: {
                        normal: {
                            /* 	borderColor: colorArr2[2],
                                borderWidth: 2, */
                            color: colorArr2[2]
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                }
            ]
        }
        let chart1 = echarts.init(document.querySelector("#litiBar1"))
        chart1.setOption(option)
    }

    // 存入折线图
    function addfileLineChart(barChartXName, deleteStrList, insertList) {
        var depositTrend = echarts.init(document.getElementById('depositTrend'), null, {
            // width: 600,
            // height: 400
        });

        const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    label: {
                        show: true,
                        backgroundColor: '#fff',
                        color: '#556677',
                        borderColor: 'rgba(0,0,0,0)',
                        shadowColor: 'rgba(0,0,0,0)',
                        shadowOffsetY: 0
                    },
                    lineStyle: {
                        width: 0
                    }
                },
                backgroundColor: '#fff',
                color: '#5c6c7c',
                padding: [10, 10],
                extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
            },
            grid: {
                top: '15%'
            },
            xAxis: [{
                type: 'category',
                data: barChartXName,
                axisLine: {
                    lineStyle: {
                        color: '#DCE2E8'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    color: '#556677',
                    // 默认x轴字体大小
                    fontSize: 12,
                    // margin:文字到x轴的距离
                    margin: 15
                },
                axisPointer: {
                    label: {
                        // padding: [11, 5, 7],
                        padding: [0, 0, 10, 0],

                        // 这里的margin和axisLabel的margin要一致!
                        margin: 15,
                        // 移入时的字体大小
                        fontSize: 12,
                        backgroundColor: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#fff' // 0% 处的颜色
                            }, {
                                // offset: 0.9,
                                offset: 0.86,

                                color: '#fff' // 0% 处的颜色
                            }, {
                                offset: 0.86,
                                color: '#33c0cd' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#33c0cd' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                },
                boundaryGap: false
            }],
            yAxis: [{
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#DCE2E8'
                    }
                },
                axisLabel: {
                    color: '#556677',
                },
                splitLine: {
                    show: false
                }
            }],
            series: [{
                name: '删除',
                type: 'line',
                data: deleteStrList,
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 0,
                showSymbol: true,
                lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: '#9effff'
                    },
                        {
                            offset: 1,
                            color: '#9E87FF'
                        }
                    ]),
                    shadowColor: 'rgba(158,135,255, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                },
                itemStyle: {
                    color: colorList[0],
                    borderColor: colorList[0]
                }
            }, {
                name: '插入',
                type: 'line',
                data: insertList,
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 0,
                showSymbol: true,
                lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                        offset: 0,
                        color: '#73DD39'
                    },
                        {
                            offset: 1,
                            color: '#73DDFF'
                        }
                    ]),
                    shadowColor: 'rgba(115,221,255, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                },
                itemStyle: {
                    color: colorList[1],
                    borderColor: colorList[1]
                }
            }]
        };

        depositTrend.setOption(option);

        window.onresize = function () {
            depositTrend.resize();
        }

    }
</script>
</body>
</html>